<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="visible" width="660px" v-if="visible" append-to-body
      :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" :label-width="labelWidth" v-loading='loading'>
        <!-- 编辑时卡权益配置不可修改 -->
        <el-form-item label="卡权益配置" prop="equityInventoryId">
          <el-select v-model="form.equityInventoryId" filterable placeholder="请选择权益" clearable :style="{width: inputWidth}"
            :disabled="disabled">
            <el-option v-for="dict in options" :key="dict.id" :label="dict.value" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="权益可激活时间" required>
          <el-radio-group v-model="form.timeType">
            <el-radio :label="'1'">
              <span style="margin-right: 20px">限制时间</span>
            </el-radio>
            <el-radio :label="'2'">不限时间</el-radio>
          </el-radio-group>
          <el-form-item label="" prop="date" v-if="form.timeType=='1'">
            <el-date-picker v-model="form.date" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" :style="{width: inputWidth}">
            </el-date-picker>
          </el-form-item>
        </el-form-item>
        <el-form-item label="权益数量" required>
          <el-radio-group v-model="form.amountType">
            <el-radio :label="'1'">
              <span style="margin-right: 20px">限制数量</span>
              <!-- <el-input v-if="form.amountType=='1'" v-model.number="form.amount" placeholder="请填写权益可激活数量"
                style="width: 260px">
              </el-input> -->
            </el-radio>
            <el-radio :label="'2'">不限数量</el-radio>
          </el-radio-group>
          <el-form-item label="" prop="amount" v-if="form.amountType=='1'">
            <el-input v-model.number="form.amount" placeholder="请填写权益可激活数量" :style="{width: inputWidth}">
            </el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item label="权益图片" prop="picture" ref="imgRef">
          <ImageUploadMore :limit="1" :fileSize="20" @successImg="getImg" :value="form.picture">
          </ImageUploadMore>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="saveLoading" @click="submitForm(1)">保存权益</el-button>
        <el-button type="warning" :loading="stopLoading" @click="submitForm(2)" :disabled="stopDisabled">停用权益
        </el-button>
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    inventorySelectLs,
    inventoryIssue,
    inventoryIssueSave,
    inventoryIssueStop,
    currentInventorySelect,
  } from "@/api/equityManager/equityCard";

  export default {
    // dicts: ['asset_card_type'],
    name: "Dialog",
    data() {
      return {
        labelWidth: '120px',
        inputWidth: '280px',
        loading: false,
        id: '', //
        saveLoading: false,
        stopLoading: false,
        // 是否禁用
        disabled: false,
        stopDisabled: true,
        // 弹出层标题
        title: "权益发放",
        // 是否显示弹出层
        visible: false,
        //数组
        options: [],
        // 表单参数
        form: {
          amount: '', //权益数量
          amountType: '2', //权益数量类型 1 限制数量 2不限数量
          endTime: '', //结束时间
          equityCardId: '', //权益卡id
          equityInventoryId: '', //权益库存id（卡权益配置）
          id: '', //权益id
          startTime: '', //开始时间
          status: '1', //权益状态 1 启用 2 停用
          timeType: '2', //权益激活时间类型 1限制时间 2不限时间
          picture: '', //权益图片
          date: [], //时间选择
        },
        // 表单校验
        rules: {
          equityInventoryId: [{
            required: true,
            message: "请选择权益",
            trigger: ["change"]
          }],
          date: [{
            required: true,
            message: "请选择权益激活时间",
            trigger: ["change"]
          }],
          picture: [{
            required: true,
            message: '请上传权益图片',
            trigger: ['blur', 'change']
          }, ],
          amount: [{
            required: true,
            message: '请填写权益可激活数量',
            trigger: ['blur', 'change']
          }, ],
        },
      };
    },
    created() {

    },
    methods: {
      /** 打开发行管理弹框 */
      open(id, equityIssueId) {
        this.getInventorySelectLs()
        this.reset();
        this.form.id = equityIssueId
        this.form.equityCardId = id
        if (equityIssueId) {
          this.loading = true
          inventoryIssue(equityIssueId).then(response => {
            this.stopDisabled = false;
            this.disabled = true
            this.form = response.result;
            if (this.form.startTime != '') {
              this.$set(this.form, 'date', [response.result.startTime, response.result
                .endTime]) //用this.$set修复让回显该时间时重新选择时间页面不生效问题
              this.form.date = []
              this.form.date[0] = response.result.startTime
              this.form.date[1] = response.result.endTime
            }
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        }
        this.visible = true

      },
      // 取消按钮
      cancel() {
        this.visible = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.stopDisabled = true;
        this.disabled = false
        this.form = {
          amount: '', //权益数量
          amountType: '2', //权益数量类型 1 限制数量 2不限数量
          endTime: '', //结束时间
          equityInventoryId: '', //权益库存id（卡权益配置）
          id: '', //权益id
          startTime: '', //开始时间
          status: '1', //权益状态 1 启用 2 停用
          timeType: '2', //权益激活时间类型 1限制时间 2不限时间
          picture: '', //权益图片
          date: [], //时间选择
        }
      },
      //权益库存选择列表
      getInventorySelectLs() {
        let data = {
          type:''
        }
        currentInventorySelect(data).then(res => {
          this.options = res.result
        });
      },
      /** logo */
      getImg(e) {
        this.form.picture = e
        this.$refs['imgRef'].clearValidate();
      },
      /** 提交按钮 */
      submitForm(status) {
        this.$refs["form"].validate(valid => {
          if (valid) {
            console.log(this.form.date)
            if (this.form.date != undefined) {
              this.form.startTime = this.form.date[0]
              this.form.endTime = this.form.date[1]
            }
            if (status == 1) {
              this.saveLoading = true
              inventoryIssueSave(this.form).then(response => {
                this.$message.success('保存成功');
                this.cancel();
                this.$emit('refresh')
                this.saveLoading = false
              }).catch(() => {
                this.saveLoading = false
              });
            } else {
              this.stopLoading = true
              inventoryIssueStop(this.form).then(response => {
                this.$message.success('停用成功');
                this.cancel();
                this.$emit('refresh')
                this.stopLoading = false
              }).catch(() => {
                this.stopLoading = false
              });
            }
          }
        });
      },
      /** 序号 */
      rowIndex({
        row,
        rowIndex
      }) {
        row.index = rowIndex + 1;
      },
    }
  };

</script>
<style scoped>
  .img_box {
    width: 100px;
    height: 70px;
    border-radius: 4px;
  }

  .flex {
    display: flex;
    align-items: center;
  }

</style>
